<template>
  <div class="out-container">
    <modal name="my-first-modal">
        This is my first modal

    <div class="container ">
      <div>
        {{ $t('login.username') }}
        <input
          v-model="username"
          type="text"
        >
      </div>

      <div>
        {{ $t('login.password') }}
        <input
          v-model="password"
          type="password"
          class="passwordinput"
        >
      </div>

      <div>
        {{ $t('login.confirmPassword') }}
        <input
          v-model="confirmPassword"
          type="password"
          class="confirmPassword"
        >
      </div>

      <div>
        <button
          class="login"
          @click="regist"
        >
          {{ $t('login.signUp') }}
        </button>
      </div>
    </div>
    </modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
    };
  },
  methods: {
    ...mapActions([
      'userRegist',
    ]),
    regist() {
      this.userRegist({
        username: this.$data.username,
        password: this.$data.password,
        confirmPassword: this.$data.confirmPassword,

      });
    },
  },
};
</script>

<style lang="scss" scoped>
.out-container{
  z-index : 998;
  width : 100%;
  height : 100%;
}
.container{
    position : absolute;
    // z-index : 999;
    padding : 20px;
    margin-right : -50%;
    overflow : auto;
    background : rgb(255, 255, 255);
    border : 1px solid rgb(204, 204, 204);
    border-radius : 4px;
    outline : none;
    transform : translate(-50%, -50%);
    inset : 50% auto auto 50%;
}

.container{
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;

}

input {
  width : 300px;
  height : 40px;
  margin-bottom : 10px;
  font-size : 24px;
  text-align : center;
  text-indent : 1em;
  border : none;
  border-bottom : 2px solid #202020;
  outline : none;
}
.login{
  width : 300px;
  height : 30px;
  margin-top : 30px;
  color : #fff;
  background : #202020;
  border : 0;
  border-radius : 25px;
  outline : none;
}
</style>
